<template>
  <div>
    <div class="container">
      <div class="img mt">
        <img :src="loginImg" alt="quagmire">
        <span class="b-text">All Right</span>
        <span class="s-text">JOEY798</span>
      </div>
      <form class="login-form">
        <input type="text" v-model="loginData.username" class="form-control" placeholder="用户名">
        <input @keydown.enter="login" @focus="typingPassword" @blur="notTypingPassword" type="password"
               v-model="loginData.password" class="form-control mt-3 mb-3" placeholder="密码">
        <input type="checkbox" v-model="loginData.remember" class="form-check-input" id="remember">
        <label class="form-check-label" for="remember">&nbsp;记住我</label>
        <button @click="login" type="button" class="btn btn-primary w-100 mt-3">登陆</button>
      </form>
    </div>
  </div>
</template>

<script>

import request from '@/http/request'
import {ElMessage} from 'element-plus'
import router from '@/router'
import all_right from '@/assets/all_right.mp3'
import gigity from '@/assets/gigity.mp3'

import login_quagmire from '@/assets/login-quagmire.png'
import login_in_quagmire from '@/assets/login-in-quagmire.png'

export default {
  name: 'Login',
  data() {
    return {
      loginData: {
        username: '',
        password: '',
        remember: false,
      },
      loginImg: login_quagmire,
    }
  },
  methods: {
    login() {
      request.login(this.loginData).then(response => {
        //登陆成功
        new Audio(all_right).play()
        localStorage.setItem('token', response.data.result.token)
        localStorage.setItem('username', response.data.result.username)
        //去后台首页
        router.push({name: 'dashboard'})
      }).catch(error => {
        //登陆失败
        new Audio(gigity).play()
        ElMessage.error(error.response.data.message)
      })
    },
    typingPassword() {
      this.loginImg = login_in_quagmire
    },

    notTypingPassword() {
      console.log('typing')
      this.loginImg = login_quagmire
    },
  },
}
</script>

<style scoped>

.img {
  width: 12rem;
  margin: 0 auto;
}

.img > img {
  width: 100%;
}

.login-form {
  margin: 1rem auto;
  max-width: 300px;
}

.w-100 {
  width: 100%;
}

.b-text {
  font-size: 2rem;
}

.s-text {
  font-size: 0.7rem;

}

.mt {
  margin-top: 5rem;
}
</style>